<template>
  <el-drawer
    :visible="visible"
    :with-header="false"
    size="500px"
    title="我是标题"
    append-to-body
    @close="close"
  >
    <flexbox v-if="editNode" class="drawer-header">
      <div class="edit-title">
        <el-input
          v-if="isNameEdit"
          ref="conditionNameInput"
          v-model="editNode.conditionName"
          maxlength="20"
          @blur="nameInputBlur"
        />
        <template v-else>
          <span class="title" @click="titleEditClick">{{ editNode.conditionName }}</span>
          <i class="wk wk-edit" @click="titleEditClick" />
        </template>
      </div>
      <el-popover placement="bottom" width="200" trigger="click">
        <draggable
          v-model="dragList"
          :options="{
            group: 'list',
            forceFallback: false,
            fallbackClass: 'draggingStyle',
            filter: 'drag-item__label',
            preventOnFilter: false,
          }"
        >
          <flexbox v-for="(item, index) in dragList" :key="index" class="drag-item">
            <div class="drag-item__label">{{ item.conditionName }}</div>
            <div class="drag-item__handle">⋮⋮</div>
          </flexbox>
        </draggable>
        <el-button slot="reference" type="text">优先级设置</el-button>
      </el-popover>

      <el-tooltip effect="dark" placement="bottom">
        <template slot="content">
          首先匹配“优先级高”的条件。<br />如果匹配成功则审批单发送给该条件下的审批人；<br />如果匹配不成功则继续进行匹配下一优先级的条件。
        </template>
        <i class="wk wk-help wk-help-tips" />
      </el-tooltip>
      <i class="el-icon-close" @click="close" />
    </flexbox>
    <div v-if="editNode" class="drawer-body">
      <el-row
        v-for="(item, index) in editNode.conditionDataList"
        :key="index"
        :gutter="20"
        type="flex"
        align="middle"
        class="set-row"
      >
        <el-col :span="5" class="set-row__title">{{ item.name }}</el-col>
        <el-col :span="17" class="set-row__center">
          <flexbox v-if="item.conditionType === 8">
            <div style="flex: 1"></div>
          </flexbox>
        </el-col>
      </el-row>
    </div>
  </el-drawer>
</template>

<script>
import { objDeepCopy } from "@/utils";
import Draggable from "vuedraggable";
import {
  selectOptions,
  checkboxOptions,
  numberOptions,
  numberValueOptions,
  getSendObj,
} from "./conditioModel";
export default {
  components: {
    Draggable,
  },
  data() {
    return {
      editNode: null,
      isNameEdit: false,
      // select 3 checkbox 9 number 5 floatnumber 6
      selectOptions: selectOptions,
      checkboxOptions: checkboxOptions,
      numberOptions: numberOptions,
      numberValueOptions: numberValueOptions,
      conditionSelectVisible: false,
      dragList: [],
    };
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
    node: {
      type: Object,
      default() {
        return {};
      },
    },
    conditionParent: Array,
    conditionParentIndex: Number,
    props: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  methods: {
    /**
     * 编辑名称
     */
    titleEditClick() {
      this.isNameEdit = true;
      this.$nextTick(() => {
        this.$refs.conditionNameInput.focus();
      });
    },
    /**
     * 关闭
     */
    close() {
      this.$emit("update:visible", false);
    },
    /**
     * 输入失去焦点
     */
    nameInputBlur() {
      this.isNameEdit = false;
      if (this.editNode.conditionName === "") {
        this.editNode.conditionName = "条件";
      }
    },
  },
};
</script>

<style></style>
